import React, { Component } from 'react'
import './index.css';
// import Header from '../Header';
// import Main from '../Main';
// import Footer from '../Footer';
// import{nanoid} from 'nanoid'
// import axios from 'axios';
// import Hero from '../Hero';
// import Goods from '../Goods';
// import Yiyan from '../Yiyan';
import Home from '../pages/Home';
import About from '../pages/About';
import { Route, BrowserRouter,NavLink } from 'react-router-dom'
export default class App extends Component {
    render () {
        return (
        <div>
            <BrowserRouter>
            {/* 标题 */}
            <div class="row">
                <div class="col-xs-offset-2 col-xs-8">
                    <div class="page-header">
                        <h2>React Router Demo</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-2 col-xs-offset-2">
                    <div class="list-group">
                    <NavLink to="/home"  activeClassName="active"  className="list-group-item">首页</NavLink>
                    <NavLink to="/about"  activeClassName="active"  className="list-group-item">关于我们</NavLink>
                    </div>
                </div>
                <div class="col-xs-6">
                    {/* about页面 */}
                    <Route path="/about" component={About}/>
                    {/* home页面 */}
                    <Route path="/home" component={Home}/>
                </div>
            </div>
            </BrowserRouter>
        </div>
        )
    }
}

